<template>
  <div>
    <!-- <h2 :class="red">作业1</h2> -->
    <!-- 加上冒号就变成了一个变量 -->
    <!-- 动态绑定多个类名 可以用对象或者数组 -->
    <!-- <h4 :class="{ red: flag % 2 == 0, bg: flag % 2 != 0 }">绑定多个类名</h4>
    <h4 :class="['red', 'bg']">数组绑定多个类名</h4> -->
    <ul>
      <li
        v-for="i in 10"
        :key="i"
        @click="change(i)"
        :class="flag == i ? bg : ''"
      >
        {{ i }}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //   red: "red",
      flag: -1,
      bg: "",
    };
  },
  methods: {
    change(i) {
      this.flag = i;
      if (i % 2 == 0) {
        this.bg = "red";
      } else {
        this.bg = "pink";
      }
    },
  },
};
</script>
<style lang="scss">
.red {
  background: red;
}
.pink {
  background: papayawhip;
}
</style>
